
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/article_Index_sm.css"/>
    <link rel="stylesheet" href="css/article_Index_md.css"/>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate.css"/>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_md.css"/>
    <link rel="stylesheet" href="TemplateUI/NavTemplate/NavTemplate_sm.css"/>
</head>
<body>

<!--头部导航栏，响应式，最小宽度768-->
<div class="nav">
    <a class="logo_Astray">Astray</a>
    <ul class="nav_ul">
        <a href="index.html"><li class="nav_li">首页</li></a>
        <a href="article_Index.html"><li class="nav_li nav_action">文章</li></a>
        <a href="question_Index.html"><li class="nav_li">问答</li></a>
        <a href="test_Index.html"><li class="nav_li">测试</li></a>
        <a href="FM_Index.html"><li class="nav_li">FM</li></a>
        <li class="nav_menu">
            <ul class="nav_drop">
                <li class="item">更多<span class="triangle"></span></li>
                <a href="interact_List.html"><li class="item">动态</li></a>
                <a href=""><li class="item">选项2</li></a>
            </ul>
        </li>
    </ul>
    <ul class="nav_ul_info">
        <li class="nav_ul_info_li">
            <a  class="nav_ul_info_img" href="user_Center.html">
                <img src="img/headPhoto.png" width="2rem">
            </a>
            <div id="user_infoBox">
                <ul>
                    <li>
                        文章<br/>
                        <span>11</span>
                    </li>
                    <li>
                        提问<br/>
                        <span>11</span>
                    </li>
                    <li>回答<br/>
                        <span>11</span>
                    </li>
                    <li>收藏<br/>
                        <span>11</span>
                    </li>
                </ul>
                <dl>
                    <dt>称号：</dt>
                    <dd><img src="img/jia.png" alt=""></dd>
                    <dd><img src="img/jia.png" alt=""></dd>
                </dl>
                <div>
                    <a>签到</a>
                    <a href="user_Info_baseInfo.html">前往个人信息>>></a>
                </div>
            </div>

        </li>
        <li class="nav_ul_info_li"><a onclick="javascript:window.open('user_chat.html','chat','top=100%,left=100%,status=no,location=no,menubar=no, scrollbars=no,')">消息</a></li>
        <li class="nav_ul_info_li"><a href="user_Info_systemMessage.html">通知</a></li>
    </ul>
</div>
<!--文章首页-->
<div class="BOX">
<!--文章分类-->
    <div class="BOX1">
        <!--文章导航栏-->
        <div class="tab">
            <div class="tabDiv">
                <span class="tabItem">全部</span>
                <div>
                    <div> <div class="tab_head_lables">
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>

                        <div style="clear:both"></div>
                    </div></div>
                </div>
            </div>

            <div class="tabDiv">
                <span class="tabItem">婚恋</span>
                <div>
                    <div><div class="tab_head_lables">
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>

                        <div style="clear:both"></div>
                    </div></div>
                </div>
            </div>

            <div class="tabDiv">
                <span class="tabItem">健康</span>
                <div>
                    <div><div class="tab_head_lables">
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <div style="clear:both"></div>
                    </div></div>
                </div>
            </div>
            <div class="tabDiv">
                <span class="tabItem">职场</span>
                <div>
                    <div> <div class="tab_head_lables">
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>

                        <div style="clear:both"></div>
                    </div></div>
                </div>
            </div>
            <div class="tabDiv">
                <span class="tabItem">科普</span>
                <div>
                    <div><div class="tab_head_lables">
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>

                        <div style="clear:both"></div>
                    </div></div>
                </div>
            </div>
            <div class="tabDiv">
                <span class="tabItem">成长</span>
                <div>
                    <div><div class="tab_head_lables">
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>

                        <div style="clear:both"></div>
                    </div></div>
                </div>
            </div>
            <div class="tabDiv">
                <span class="tabItem">短片</span>
                <div>
                    <div><div class="tab_head_lables">
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>
                        <a href="#" class="tab_head_lable">情感</a>
                        <a href="#" class="tab_head_lable">德玛</a>

                        <div style="clear:both"></div>
                    </div></div>
                </div>
            </div>
        </div>
        <!--文章列表-->
        <div class="article_list">
            <a href="#"><span class="article_hot">最热</span></a>
            <a href="#"><span class="article_new">最新</span></a>
        <div class="article_list_blurb">
        <div class="article_list_acticlepicture">
        <a href="article_Details.html"><img src="img/u117.png"></a>
        </div>
        <div class="article_list_acticlepictures">
            <div class="article_title">
                <span><a href="article_Details.html">"我觉得span标签挺好的"</a></span>
            </div>
            <div class="article_content">
                <span class="article_content">李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了</span>
            </div>
            <div class="article_class">
                <span class="article_lable"><a href="#">情感</a></span>
                <span class="article_lable"><a href="#">德玛</a></span>
                <div class="article_author1">
                    <a href="user_Center.html"><span class="article_author">asdasdsa</span></a>
                    <a href="#"><span class="article_good"><img src="img/u125.png">1121</span></a>
                    <span class="article_views"><img src="img/u127.png">111</span>
                </div>
            </div>
        </div>
        </div>
            <div class="article_list_blurb">
                <div class="article_list_acticlepicture">
                    <a href="article_Details.html"><img src="img/u117.png"></a>
                </div>
                <div class="article_list_acticlepictures">
                    <div class="article_title">
                        <span><a href="article_Details.html">"我觉得span标签挺好的"</a></span>
                    </div>
                    <div class="article_content">
                        <span class="article_content">李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了</span>
                    </div>
                    <div class="article_class">
                        <span class="article_lable"><a href="#">情感</a></span>
                        <span class="article_lable"><a href="#">德玛</a></span>
                        <div class="article_author1">
                            <a href="user_Center.html"><span class="article_author">asdasdsa</span></a>
                            <a href="#"><span class="article_good"><img src="img/u125.png">1121</span></a>
                            <span class="article_views"><img src="img/u127.png">111</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="article_list_blurb">
                <div class="article_list_acticlepicture">
                    <a href="article_Details.html"><img src="img/u117.png"></a>
                </div>
                <div class="article_list_acticlepictures">
                    <div class="article_title">
                        <span><a href="article_Details.html">"我觉得span标签挺好的"</a></span>
                    </div>
                    <div class="article_content">
                        <span class="article_content">李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了</span>
                    </div>
                    <div class="article_class">
                        <span class="article_lable"><a href="#">情感</a></span>
                        <span class="article_lable"><a href="#">德玛</a></span>
                        <div class="article_author1">
                            <a href="user_Center.html"><span class="article_author">asdasdsa</span></a>
                            <a href="#"><span class="article_good"><img src="img/u125.png">1121</span></a>
                            <span class="article_views"><img src="img/u127.png">111</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="article_list_blurb">
                <div class="article_list_acticlepicture">
                    <a href="article_Details.html"><img src="img/u117.png"></a>
                </div>
                <div class="article_list_acticlepictures">
                    <div class="article_title">
                        <span><a href="article_Details.html">"我觉得span标签挺好的"</a></span>
                    </div>
                    <div class="article_content">
                        <span class="article_content">李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了</span>
                    </div>
                    <div class="article_class">
                        <span class="article_lable"><a href="#">情感</a></span>
                        <span class="article_lable"><a href="#">德玛</a></span>
                        <span class="article_lable"><a href="#">德玛</a></span>
                <div class="article_author1">
                    <a href="user_Center.html"><span class="article_author">asdasdsa</span></a>
                    <a href="#"><span class="article_good"><img src="img/u125.png">1121</span></a>
                    <span class="article_views"><img src="img/u127.png">111</span>
                </div>
            </div>
        </div>
            </div>
            <div class="article_list_blurb">
                <div class="article_list_acticlepicture">
                    <a href="article_Details.html"><img src="img/u117.png"></a>
                </div>
                <div class="article_list_acticlepictures">
                    <div class="article_title">
                        <span><a href="article_Details.html">"我觉得span标签挺好的"</a></span>
                    </div>
                    <div class="article_content">
                        <span class="article_content">李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了李胖胖又胖了</span>
                    </div>
                    <div class="article_class">
                        <span class="article_lable"><a href="#">情感</a></span>
                        <span class="article_lable"><a href="#">德玛</a></span>
                        <span class="article_lable"><a href="#">情感</a></span>
                        <div class="article_author1">
                            <a href="user_Center.html"><span class="article_author">asdasdsa</span></a>
                            <a href="#"><span class="article_good"><img src="img/u125.png">1121</span></a>
                            <span class="article_views"><img src="img/u127.png">111</span>
                        </div>
                    </div>
                </div>
            </div>



    </div>
        <ul class="testPage">
            <li>上一页</li>
            <li>1</li>
            <li>2</li>
            <li class="action">3</li>
            <li>4</li>
            <li>...</li>
            <li>10</li>
            <li>下一页</li>
        </ul>
    </div>
<!--推荐文章-->
    <div class="article_recommend">
        <p>推荐文章</p>
        <!--推荐的文章-->
        <div class="article_recommend_blurb">
          <div class="article_recommend_picture">
              <a href="article_Details.html"> <img src="img/u46.png"></a>
          </div>
            <div class="article_recommend_introduce">
                <a href="article_Details.html"><span class="article_recommend_content">你永远无法哄睡一颗清醒的心--如何面对失眠</span></a>
                <div class="article_recommend_author1">
                    <a href="user_Center.html"><span class="article_recommend_author">迷途者</span></a>
            <span class="article_recommend_views"><img src="img/u127.png">112</span>
                </div>
        </div>
        <div style="clear:both"></div>
        </div>
        <!--推荐的文章-->
        <div class="article_recommend_blurb">
            <div class="article_recommend_picture">
                <a href="article_Details.html"><img src="img/u46.png"></a>
            </div>
            <div class="article_recommend_introduce">
                <a href="article_Details.html"><span class="article_recommend_content">你永远无法哄睡一颗清醒的心--如何面对失眠</span></a>
                <div class="article_recommend_author1">
                    <a href="user_Center.html"><span class="article_recommend_author">迷途者</span></a>
                    <span class="article_recommend_views"><img src="img/u127.png">112</span>
                </div>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>


</body>
</html>